<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="2"
              process-status="wait"
              align-center
              style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="提交审核" />
    </el-steps>
    <el-button type="text"
               @click="dialogChapterFormVisible = true">添加章节</el-button>
    <Dialog :dialog-visible="dialogChapterFormVisible"
            :chapter="chapter"
            :file-list="fileList"
            @fileList="data=>this.fileList=data"
            @handleDialogVisible="()=>{ dialogChapterFormVisible=false}"
            @saveOrUpdate="saveorUpdate" />
    <ul class="chanpterList">
      <li v-for="chapter in chapterNestedList"
          :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text"
                       @click="dialogVideoFormVisible =true">添加小结</el-button>
            <el-button type="text"
                       @click="editChapter(chapter.id)">编辑</el-button>
            <el-button type="text"
                       @click="removeChapter(chapter.id)">删除</el-button>
          </span>
        </p>
        <DialogVideo :dialog-video-form-visible="dialogVideoFormVisible"
                     :video="video"
                     :save-video-btn-disabled="saveVideoBtnDisabled"
                     @closeDialog="closeDialog"
                     @saveOrUpdateVideo="saveOrUpdateVideo" />
        <ul class="chanpterList videoList">
          <li v-for="video in chapter.children"
              :key="video.id">
            <p>{{ video.title }}
              <span class="acts">
                <el-button type="text"
                           @click="editVideo(video.id)">编辑</el-button>
                <el-button type="text"
                           @click="removeVideo(video.id)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <div>
      <el-button @click="previous">上一步</el-button>
      <el-button :disabled="saveBtnDisabled"
                 type="primary"
                 @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import chapter from '@/api/edu/chapter'
import videoAPI from '@/api/edu/video'

import Dialog from './chapteritem/dialog.vue'
import DialogVideo from './chapteritem/dialogVideo.vue'
export default {
  components: {
    Dialog,
    DialogVideo
  },
  data() {
    return {
      fileList: [],
      saveBtnDisabled: false, // 保存按钮是否禁用
      dialogChapterFormVisible: false,
      courseId: '', // 所属课程
      chapterNestedList: [], // 章节嵌套课时列表

      defaultProps: {
        children: 'children',
        label: 'title'
      },
      chapter: {
        title: '',
        sort: 0
      },
      saveVideoBtnDisabled: false, // 课时按钮是否禁用
      dialogVideoFormVisible: false, // 是否显示课时表单
      chapterId: '', // 课时所在的章节id
      video: { // 课时对象
        title: '',
        sort: 0,
        free: 0,
        videoSourceId: ''
      }

    }
  },
  created() {
    this.init()
  },
  methods: {
    previous() {
      // console.log('previous')
      this.$router.push({ path: '/edu/course/info/' + this.courseId })
    },
    next() {
      this.$router.push({ path: '/edu/course/publish/' + this.courseId })
    },

    init() {
      if (this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.fetchChapterNestedListByCourseId()
      }
    },
    fetchChapterNestedListByCourseId() {
      chapter.getNestedTreeList(this.courseId).then(response => {
        this.chapterNestedList = response.data.allChapterVideo
      })
    },

    // 添加章节
    saveorUpdate(chapter) {
      this.saveBtnDisabled = true
      this.chapter = chapter
      if (!this.chapter.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    saveData() {
      this.chapter.courseId = this.courseId
      chapter.save(this.chapter).then(response => {
        console.log(response)
        this.chapterId = response.data.chapterId
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.helpSave()
      }).catch((response) => {
        this.$message({
          type: 'error',
          message: response.message
        })
      })
    },
    // 数据更新的接口
    updateData() {
      chapter.updateById(this.chapter).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.helpSave()
      }).catch((response) => {
        this.$message({
          type: 'error',
          message: response.message
        })
      })
    },
    helpSave() {
      this.fetchChapterNestedListByCourseId()
      this.chapter.title = ''
      this.chapter.sort = 0
      this.saveBtnDisabled = false
    },

    // 修改章节
    editChapter(chapterId) {
      this.dialogChapterFormVisible = true
      chapter.getById(chapterId).then(response => {
        this.chapter = response.data.chapter
      })
    },

    // 删除章节
    removeChapter(chapterId) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return chapter.removeById(chapterId)
      }).then(() => {
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      })
    },
    closeDialog(data) {
      this.video = data
      this.dialogVideoFormVisible = false
      this.video.title = ''// 重置章节标题
      this.video.sort = 0// 重置章节标题
      this.video.videoSourceId = ''// 重置视频资源id
    },

    // 添加小结
    saveOrUpdateVideo(video) {
      this.saveVideoBtnDisabled = true
      if (!video.id) {
        this.saveDataVideo(video)
      } else {
        this.updateDataVideo(video)
      }
    },
    saveDataVideo(video) {
      video.courseId = this.courseId
      video.chapterId = this.chapterId
      videoAPI.saveVideoInfo(video).then(response => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
        this.helpSaveVideo()
      })
    },

    updateDataVideo() {
      videoAPI.updateVideoInfoById(this.video).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.helpSaveVideo()
      })
    },

    helpSaveVideo() {
      this.dialogVideoFormVisible = false// 如果保存成功则关闭对话框
      this.fetchChapterNestedListByCourseId()// 刷新列表
      this.video.title = ''// 重置章节标题
      this.video.sort = 0// 重置章节标题
      this.video.videoSourceId = ''// 重置视频资源id
      this.saveVideoBtnDisabled = false
    },

    // 编辑小节
    editVideo(videoId) {
      this.dialogVideoFormVisible = true
      videoAPI.getVideoInfoById(videoId).then(response => {
        this.video = response.data.video
      })
    },
    removeVideo(videoId) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return videoAPI.removeById(videoId)
      }).then(() => {
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    }
  }
}
</script>

<style>
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}
.videoList {
  padding-left: 50px;
}

.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
